<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <!--标签页-->
        <el-tabs>
          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        </el-tabs>
        <!--按钮-->
        <el-button type="primary" @click.native="dodoAdd">+新建角色</el-button>
        <!--表格-->
        <el-table
          :data="list"
          stripe
          style="width: 100%"
        >
          <!---->
          <el-table-column
            label="序号"
            type="index"
          />
          <!---->
          <el-table-column
            label="角色名称"
            prop="name"
          />
          <!---->
          <el-table-column
            label="描述"
            prop="description"
          />
          <!---->
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button
                size="mini"
                type="success"
                @click="hAssign(scope.row.id)"
              >分配权限</el-button>
              <el-button
                size="mini"
                type="primary"
                @click.native="hEdit(scope.row)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click.native="hDel(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <!--
          @handleCurrentChange : 用户点击的页面数
          total : 总条数
          page-size : 每一页有多少条
        -->
        <el-pagination
          :current-page.sync="pageParams.page"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pageParams.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <!--el-dialog对话框-->
      <el-dialog
        :title="isEdit? '编辑角色':'添加角色'"
        :visible.sync="showDialog"
        width="40%"
        @close="doClose"
      >
        <!--el-form表单-->
        <el-form
          ref="formDataRef"
          label-position="labelPosition"
          label-width="80px"
          :model="formData"
          :rules="formDataRules"
        >
          <!---->
          <el-form-item
            label="角色名称"
            prop="name"
          >
            <el-input
              v-model="formData.name"
              placeholder="请输入角色名称"
            />
          </el-form-item>
          <!---->
          <el-form-item
            label="角色描述"
            prop="description"
          >
            <el-input
              v-model="formData.description"
              placeholder="请输入角色描述"
            />
          </el-form-item>
          <!---->
          <el-form-item>
            <template>
              <el-button type="info" @click.native="doClose">取消</el-button>
              <el-button type="primary" @click.native="doSubmit">确认</el-button>
            </template>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--分配权限对话框-->
      <el-dialog

        :title="'分配权限'"
        :visible.sync="showDialogRoles"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <assignPermission
          ref="roleRef"
          :role-id="roleId"
          @close="doCloseRolueDialog"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getRoles, deleteRoles, setRoles, editRoles } from '@/api/setting'
import assignPermission from '@/views/settings/assignPermission.vue'
export default {
  components: {
    assignPermission
  },
  // 数据
  data() {
    return {
      roleId: '', // 分配角色的id
      list: [], // 角色的数据
      total: 0, // 总条数
      pageParams: {
        page: 1, // 当前页码
        pagesize: 2 // 页码有多少条
      },
      showDialog: false, // 对话框显示,隐藏
      formData: { // 新增表单对话框value数组
        name: '', // 角色名称
        description: '' // 角色描述
      },
      isEdit: false, // 是否是编辑
      // 权限对话框
      showDialogRoles: false,
      // 配置检验表单规则
      formDataRules: {
        name: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { min: 2, max: 50, message: '输入长度为2-50个字符', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' },
          { min: 2, max: 300, message: '输入长度为2-300个字符', trigger: 'blur' }
        ]
      }
    }
  },
  // 钩子
  created() {
    // 获取角色列表,调用loadRoles方法
    this.loadRoles()
  },
  // 方法
  methods: {
    // -------------父组件知道子组件成功
    doCloseRolueDialog() {
      // 关闭对话框
      this.showDialogRoles = false
    },
    // -----------------点击分配权限按钮
    hAssign(id) {
      // 打开对话框
      this.showDialogRoles = true
      // 父传子,传id
      this.roleId = id
      // 调用子组件的方法,让他发请求
      this.$nextTick(() => {
        this.$refs.roleRef.loadRoleDetail()
      })
    },
    // ---------封装loadRoles函数,获取角色列表
    async loadRoles() {
      //  page:页码
      //  pagesize	:	每页条数
      const res = await getRoles(this.pageParams)
      if (res.code === 10000) {
        this.$message.success(res.message)
        // 角色列表数据
        console.log('---roles', res.data)
        // 将数据绑定到data中
        this.list = res.data.rows
        this.total = res.data.total
        // this.formData.name = res.data.rows.name
        // this.formData.description = res.data.rows.description
      } else {
        this.$message.error(res.message)
      }
    },
    // -----------新建角色功能,点击新增按钮
    dodoAdd() {
      // 显示对话框
      this.showDialog = true
      // 进入新增状态
      this.isEdit = false
    },
    // ----------点击确认按钮
    doSubmit() {
      this.$refs.formDataRef.validate(valid => {
        if (valid) {
          // 判断是否是编辑,还是新增
          if (this.isEdit) {
            // 是编辑
            this.doEdit()
          } else {
            // 做添加功能
            // 做循环
            this.doAdd()
          }
        }
      })
    },
    // --------- 点击取消按钮
    doClose() {
      // 关闭对话框
      this.showDialog = false
      // 清空表单
      this.formData = {
        name: '', // 角色名称
        description: '' // 角色描述
      }
      this.$refs.formDataRef.resetFields()
    },
    // ----------添加角色功能,封装添加功能函数
    async doAdd() {
      const res = await setRoles(this.formData)
      console.log(res)
      // 成功
      if (res.code === 10000) {
        // 显示成功信息
        this.$message.success(res.message)
        // 获取查询最后一页的数据
        // 让用户立即看到新增的数
        // 先让total++
        this.total++
        this.pageParams.page = Math.ceil((this.total) / this.pageParams.pagesize)
        // 清空表单
        this.formData = { // 新增表单对话框value数组
          name: '', // 角色名称
          description: '' // 角色描述
        }
        // 重新获取角色列表
        this.loadRoles()
      } else {
        // 失败,显示失败信息
        this.$message.error(res.message)
      }
      // 隐藏对话框
      this.showDialog = false
    },
    // ----------------编辑功能,封装编辑函数
    async doEdit() {
      const res = await editRoles(this.formData)
      console.log(res)
      // 成功
      if (res.code === 10000) {
        // 显示成功信息
        this.$message.success(res.message)
        // 获取查询最后一页的数据
        // 让用户立即看到新增的数
        // 先让total++
        // this.total++
        // this.pageParams.page = Math.ceil((this.total) / this.pageParams.pagesize)
        // 清空表单
        this.formData = { // 新增表单对话框value数组
          name: '', // 角色名称
          description: '' // 角色描述
        }
        // 重新获取角色列表
        this.loadRoles()
      } else {
        // 失败,显示失败信息
        this.$message.error(res.message)
      }
      // 隐藏对话框
      this.showDialog = false
    },
    // --------------点击编辑按钮,编辑功能
    hEdit(row) {
      // 点击编辑按钮时,进入编辑状态
      this.isEdit = true
      // 显示对话框
      this.showDialog = true
      // 数据回填
      this.formData = { ...row }
    },
    // -------------删除角色功能,点击删除按钮
    hDel(id) {
      this.$confirm('你确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // // 显示删除成功信息
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // })
          // 获取删除数据
          const res = await deleteRoles(id)
          // console.log(res)
          if (res.code === 10000) {
            // 显示删除成功信息
            this.$message.success(res.message)
            // total总条数除以pagesize余1时,删除让page--
            if (this.total % this.pageParams.pagesize === 1) {
              this.pageParams.page--
            }
            // 如果删除是最后一条数据,就页面要减1
            // if (this.list.length === 1) {
            //   let page = this.pageParams.page
            //   page--
            //   // 页码不能减为0,
            //   // if(this.pageParams.page === 0) {
            //   //   this.pageParams.page = 1
            //   // }
            //   page = Math.max(1, page)
            //   this.pageParams.page = page
            // }
            // 刷新页面数据
            this.loadRoles()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          // 删除失败信息
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //  ---------一个页面有多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // -----------用户点击了第几页
    handleCurrentChange(curPage) {
      console.log(`当前页: ${curPage}`)
      // 更新页码
      this.pageParams.page = curPage
      // 重新获取角色列表数据
      this.loadRoles()
    }
  }
}
</script>
